<template>
    <el-container style="height: 500px;" v-loading="loading">
        <el-header class="list-title" style="height: auto;">
              <span>
                报警信息
              </span>
        </el-header>
        <el-header style="height: auto;border: 1px solid #cccccc;padding: 25px 25px 5px 25px;">
            <el-form :inline="true" :model="queryform" class="search-form-inline" size="mini" @submit.native.prevent
                     label-width="80px">
                <el-form-item >
                    <el-input v-model="queryform.ip" placeholder="请输入IP"/>
                </el-form-item>
                <el-form-item >
                    <el-input v-model="queryform.mac" placeholder="请输入MAC地址"/>
                </el-form-item>
                <el-form-item >
                    <el-select v-model="queryform.warnType">
                        <el-option label="全部" :value="-1"></el-option>
                        <el-option label="未注册" :value="0"></el-option>
                        <el-option label="ip变动" :value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item >
                    <el-input v-model="queryform.responsible" placeholder="请输入负责人"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" native-type="submit" @click="()=>{
                        pageNo = 1;
                        loadData();
                    }" size="mini">搜索
                    </el-button>
                </el-form-item>
            </el-form>
        </el-header>
        <el-main>
            <el-container>
                <el-main>
                    <DynamicTable
                            :columns="tableColumns"
                            :list="tableData" :current-page="currentPage"
                            ref="singleTable"
                            @selection-change="handleSelectionChange"
                    >
                        <template slot="top">

                        </template>
                        <template slot="end">
                            <el-table-column label="状态" align="center" :min-width="200" >
                                <template slot-scope="scope">
                                    <el-button  type="text" size="small" style="color:#67C23A;" v-if="scope.row.isRead">已读</el-button>
                                    <el-button @click="handleRead(scope.row)" type="text" size="small" style="color:red;" v-else>未读</el-button>
                                </template>
                            </el-table-column>
                        </template>
                    </DynamicTable>
                </el-main>

            </el-container>
        </el-main>
    </el-container>
</template>

<script>
import CustomPage from '@/common/CustomPageMin';
import CuDatepicker from '@/common/CuDatepicker';
import DynamicTable from '@/common/DynamicTable';

export default {
  name: 'operatelog',
  components: {
    CustomPage,
    DynamicTable,
    CuDatepicker
  },
  data() {
    return {
      queryform: {
        ip: '',
        mac: '',
        warnType: -1,
        responsible: ''
      },
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      multipleSelection: [],
      tableData: [],
      tableColumns: [
        {
          field: 'ip',
          title: '告警IP',
          width: '140px',
        },
        {
          field: 'mac',
          title: 'MAC地址',
          width: '140px',
        },
        {
          field: 'warnInfo',
          title: '告警类型',
          width: '140px',
          renderer: (v) => {
            return v.warnInfo ? 'ip变动' : '未注册'
          }
        },
        {
          field: 'rackDept',
          title: '所属部门',
          width: '120px',
        },
        {
          field: 'responsible',
          title: '负责人',
          width: '120px',
        },
        {
          field: 'createTime',
          title: '报警时间',
          width: '140px',
          renderer: (v) => {
            return v.createTime ? new Date(v.createTime).format('yyyy-MM-dd hh:mm:ss') : '-'
          }
        },
      ],
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleRead(item) {
      this.loading=true;
      this.$axiosInstance({
        method: 'get',
        url: '/haveReadUnread',
        params: {
          id: item.id
        }
      }).then((res) => {
        // let { code, data, message } = res.data;
        // if (code === 200) {
        //   this.tableData = data;
        // } else {
        //   this.$message({
        //     message,
        //     type: 'success'
        //   });
        // }
        this.loadData();
      }).catch((err) => {
        this.loading=false;
      })
    },
    loadData() {
      this.loading = true;
      this.$axiosInstance({
        method: 'get',
        url: '/getWarnInfo',
        params: {
          ...this.queryform
        }
      }).then((res) => {
        let { code, data } = res.data;
        if (code === 200) {
          this.tableData = data;
        } else {
          this.tableData = [];
        }
        this.loading = false;
      }).catch((err) => {
        this.loading = false;
      })
    },

    handlequery() {
      this.currentPage = 1;
      this.loadData()
    },
    handleSizeChange(size) {
      this.currentPage = 1;
      this.pageSize = size;
      this.loadData()
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.loadData()
    },
  },
  mounted() {
    this.$nextTick(function() {
      this.loadData();
    });
  }
};
</script>

<style scoped>
    .head-title {
        padding: 5px;
    }

    .num {
        padding: 1px 8px;
        color: #017dbf;
        font-size: 25px;
    }
</style>
